<template>
	<view class="indexListBox">
		<!--  <view class="navbar">
            <view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state"
                :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
                {{ item.text }}({{item.count}})
            </view>
        </view> -->
		<view class="topbac" :class="{'activeTopbac':optionsData.me}">
			<!-- 导航条 -->
			<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
				<view class="cu-bar  fixed"
					:style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
					<view class="action" @tap="$wanlshop.back(1)">
						<text class="wlIcon-fanhui1"></text>
					</view>
				</view>
			</view>
			<image class="bacImg" :src="$wanlshop.oss(info.default_image)" mode=""></image>
			<image v-if="!optionsData.me" @click="$wanlshop.auth('/pages/shop/index?id='+info.shop_id)" class="jrsjdp"
				src="https://img.aibbyp.com/wechat/images/nHome/jrsjdp.png" mode=""></image>
			<image v-if="optionsData.me" @click="chooseImage('default_image')" class="jrsjdp xgbj"
				src="https://img.aibbyp.com/wechat/images/nHome/xgbj.png" mode=""></image>
			<view class="shopData flex_end">
				<view class="headimg">
					<image class="img" :src="$wanlshop.oss(info.avatar)" mode=""></image>
				</view>
				<view class="title">
					<view class="f3d f36 fb">
						{{info.nickname}}
					</view>
					<view class="flex mt24">
						<text class="c6">粉丝</text>
						<text class="c3d ml12 fb">{{info.fans}}</text>
						<text class="c6 ml20">关注</text>
						<text class="c3d ml12 fb">{{info.follow}}</text>
					</view>
				</view>
				<view class="" v-if="!optionsData.me">
					<view @click="setFindUser" class="qxgz" v-if="info.is_follow">
						已关注
					</view>
					<view @click="setFindUser" class="qxgz gz" v-else>
						关注
					</view>
				</view>
			</view>

		</view>

		<view class="swiperBox" >
			<view>
				<goods-tabs :list="navList" :is-scroll="true" v-model="tabCurrentIndex" name="text_show"></goods-tabs>
			</view>
			<swiper :current="tabCurrentIndex" :circular='false' style="flex: 1;" duration="300" @change="changeTab"
				v-if="navList">
				<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="key">
					<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData" lower-threshold="100"
						@refresherrefresh='refresherrefresh' :refresher-triggered="triggered" :refresher-enabled='true'
						:refresher-threshold='100' style="touch-action: none ">
						<!-- 空白页 -->
						<wanl-empty text="暂无数据" v-if="tag.loaded === true && tag.list.length === 0" />
						<!-- 订单列表 tag.list-->
						<view class="blockBox">
							<block v-if="tag.list.length > 0">
								<view class="u-p-t-16" v-for="(item, index) in tag.list" :key="index">
									<!-- 商品选择 -->
									<view class="listDataBox">
										<image v-if="item.status == 0" class="shzImg"
											src="https://img.aibbyp.com/wechat/images/nHome/shz.png" mode="">
										</image>
										<image v-if="item.status == 2" class="shzImg wtgImg"
											src="https://img.aibbyp.com/wechat/images/nHome/wtg.png" mode="">
										</image>
										<view class="imgBox" @click.stop="btnImg(item,index,'right')">

											<u-lazy-load class="imgs" v-if="item.type == 'image'"
												:image="item.content_url" mode="">
											</u-lazy-load>
											<view class="" v-if="item.bj" @click.stop="btnImg(item,index,'right')">
												<u-lazy-load class="imgs" :image="item.videoImg"
													v-if="item.type == 'video'" mode=""></u-lazy-load>
											</view>
											<view class="" v-if="!item.bj" @click.stop="btnImg(item,index,'right')">
												<u-lazy-load class="imgs" :image="item.videoImg"
													v-if="item.type == 'video'" mode=""></u-lazy-load>
											</view>
											<image class="stopVideo"
												src="https://img.aibbyp.com/wechat/images/nHome/videozt.png" mode="">
											</image>

										</view>
										<view class="overflow_1 f28 mt10 pl18 pr18" style="height: 44rpx;">
											{{item.title}}
										</view>
										<view class="flex_sb shops">
											<view>
												<view class="flex_ac">
													<image class="shopImg" :src="item.shop.avatar" mode="">
													</image>
													<view class="ml8 f20 c3">
														{{item.shop.shopname}}
													</view>
												</view>
											</view>
											<view class="flex_ac">
												<u-icon name="eye" size="22"></u-icon>
												<view class="f20 ml8">
													{{item.views}}
												</view>
											</view>
										</view>
										<view class="flex_sb shops" v-if="item.cg">
											<view>
												<view class="flex_ac">
													<view class="ml8 f20 c3">
														{{item.shop.shopname}}
													</view>
												</view>
											</view>
											<view class="ml12" @click="btnDelete(item)">
												<u-icon name="trash" size="22"></u-icon>
											</view>
										</view>

										<view class="" v-if="item.me">
											<view v-if="item.bj" class="btnBj"
												@click="$wanlshop.auth('/pages/note/addNote?id=' + item.id)">
												编辑
											</view>
										</view>
									</view>

								</view>

							</block>

						</view>
						<uni-load-more :status="tag.loadingType" :content-text="contentText"
							v-if="tag.list.length !== 0" />
						<view class="edgeInsetBottom"></view>
					</scroll-view>
				</swiper-item>
			</swiper>

			<image v-if="optionsData.me" @click="$wanlshop.auth('/pages/note/addNote')" class="biImg"
				src="https://img.aibbyp.com/wechat/images/nHome/fbzp1.png" mode="">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gotype: 'you',
				triggered: false,
				optionsData: {
					me: true
				},
				info: {
					default_image: '',
					nickname: '',
					fans: '',
					follow: '',
					avatar: '',
				},
				prevVideoId: '',
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '作品',
						text_show: '作品',
						key: 'push',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 1,
						text: '喜欢',
						text_show: '喜欢',
						key: 'likes',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 4,
						text: '收藏',
						text_show: '收藏',
						key: 'collect',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
				],

				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了'
				},
				cart: {
					status: 0,
					allsum: 0,
				},
				chooseList: [],
				ts: 0,
				keyword: '',
				onShowNum: 0,
			};
		},
		onLoad(options) {


			if (options.id) { // 其他人进去查看
				this.optionsData = options
				this.optionsData.me = false
			} else { //自己进入

				let arrNavList = [{
						state: 2,
						text: '历史',
						text_show: '历史',
						key: 'record',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 3,
						text: '草稿箱',
						text_show: '草稿箱',
						key: 'draft',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
				]
				this.navList = this.navList.concat(arrNavList)
				this.gotype = 'my'
			}
			if (!options.state) {
				options.state = 0;
			}

			this.loadData('tabChange');
			this.userHome()
			// 第一次进入页面不触发onshow
			setTimeout(() => {
				this.onShowNum++
			}, 1000)
		},
		onShow() {
			this.$nextTick(() => {
				if (this.onShowNum >= 1) {
					console.log('this.onShowNum', this.onShowNum);
					// this.navList[this.tabCurrentIndex].list = []
					// this.navList[this.tabCurrentIndex].loadingType = 'more'
					// this.navList[this.tabCurrentIndex].current_page = 1
					// this.$refs.uWaterfall1[this.tabCurrentIndex].clear();
					this.loadData();
					this.userHome()
				}

			})
		},
		methods: {
			// 下拉刷新

			refresherrefresh(i) {
				if (this.triggered == false) {
					this.triggered = true
					this.navList[this.tabCurrentIndex].list = []
					this.navList[this.tabCurrentIndex].loadingType = 'more'
					this.loadData();
				}

			},

			// 关注 取消关注
			setFindUser() {
				this.$api.post({
					url: '/contents/setFindUser',
					data: {
						id: this.optionsData.id
					}
				}).then(res => {
					this.userHome()

				})

			},
			// 修改背景
			chooseImage(key) { //选择图片
				let that = this
				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: 1,
					success: res => {
						uni.showLoading({
							title: '上传中...'
						})
						this.$api.get({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											this.$api.upload({
												url: updata.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.storage ==
													'local' ? null : updata
													.multipart,
												success: data => {
													if (key ==
														'default_image') {
														this.info
															.default_image =
															data.url
													}
													this.editImage(data
														.url)
													uni.hideLoading()
												}
											});
										}
									});
								}
							}
						});
					}
				})
			},

			// 请求修改图片
			editImage(url) {
				this.$api.post({
					url: '/wanlshop.user/editImage',
					data: {
						image: url
					}
				}).then(res => {

				})
			},

			// 跳转到视频详情
			btnImg(item, k, type) {
				let index = k
				let user_id = this.navList[this.tabCurrentIndex].list[k].user_id
				let shop_id = this.navList[this.tabCurrentIndex].list[k].shop_id
				uni.navigateTo({
					url: `/pages/note/swiperList?gotype=${this.gotype}&tabIndex=${this.tabCurrentIndex}&id=${item.id}&me=${this.optionsData.me}&shop_id=${shop_id}&user_id=${user_id}&detailsType=${item.type}&index=${index}&shop_id=${this.info.shop_id}&type=${this.navList[this.tabCurrentIndex].key}`,
				})
			},
			// 删除草稿
			btnDelete(i) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该草稿',
					success: res => {
						if (res.confirm) {
							this.$api.post({
								url: '/wanlshop.user/delContent',
								data: {
									id: i.id
								}
							}).then(res => {
								this.navList[this.tabCurrentIndex].list = []
								this.navList[this.tabCurrentIndex].current_page = 1
								this.navList[this.tabCurrentIndex].loadingType = 'more'
								this.loadData()
							})
						}

					}
				});

			},

			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				let status = navItem.key
				console.log('loadData', index, navItem);
				console.log(navItem.loadingType, source);
				//判断是否最后一页
				if (navItem.loadingType == 'noMore') {
					return;
				}

				//tab切换只有第一次需要加载数据
				if (source === 'tabChange' && navItem.loaded === true) {
					return;
				}
				//防止重复加载
				if (navItem.loadingType === 'loading') {
					return;
				}
				navItem.loadingType = 'loading';
				let data = {
					limit: 10,
					type: status,
					page: navItem.current_page,
					user_id: this.optionsData.id,
					me: this.optionsData.me
				}
				if (this.keyword.length > 0) {
					data['title'] = this.keyword
				}

				// 获取列表
				this.$api.get({
					url: '/wanlshop.user/contentsList',
					data: data,
					success: res => {
						res.data.forEach(xx => {
							if (xx.type == 'video') {
								xx.videoImg = this.$wanlshop.oss(xx.content_url.replace('mp4', 'jpg'))
							}
							xx.content_url = this.$wanlshop.oss(xx.content_url)
							xx.shop.avatar = this.$wanlshop.oss(xx.shop.avatar)
							xx.checkboxType = false
							xx.me = this.optionsData.me
						})
						console.log(navItem);
						navItem.current_page = res.current_page; //当前页码
						if (res.last_page === res.current_page) {
							navItem.loadingType = 'noMore';
						} else {
							navItem.loadingType = 'more';
							navItem.current_page++;
						}
						if (data.type == 'draft') {
							res.data.forEach(rs => { //草稿箱不展示 待审核状态
								if (rs.status == 0) {
									rs.status = 4
								}
							})
						}
						if (this.tabCurrentIndex == 0 || this.tabCurrentIndex == 4) {
							res.data.forEach(rs => {
								rs.bj = true
							})
						}
						if (this.tabCurrentIndex == 4) {
							res.data.forEach(rs => {
								rs.cg = true
							})
						}
						navItem.list = navItem.list.concat(res.data)
						// orderList.forEach(item => {
						// 	navItem.list.push(item);
						// });
						console.log(navItem, '==')
						console.log(this.navList, '--')
						//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
						this.$set(navItem, 'loaded', true);
						setTimeout(() => {
							this.triggered = false
						}, 1000)
					}
				});
			},

			//swiper 切换
			changeTab(e) {
				this.chooseList = [];
				let tabIndex = this.tabCurrentIndex;
				this.tabCurrentIndex = e.detail.current
				let navItem = this.navList[tabIndex];
				let list = navItem.list;
				list.forEach(item => {
					item.checked = false;
				})

				console.log(e)
				this.loadData('tabChange');
				// 获取列表
			},
			//顶部tab点击
			tabClick(index) {
				this.chooseList = [];
				let tabIndex = this.tabCurrentIndex;
				let navItem = this.navList[tabIndex];
				let list = navItem.list;
				list.forEach(item => {
					item.checked = false;
				})

				this.tabCurrentIndex = index;

				console.log('method')

			},

			// 个人主页信息
			userHome() {
				this.$api.post({
					url: '/wanlshop.user/userHome',
					data: {
						user_id: this.optionsData.id,
						me: this.optionsData.me
					}
				}).then(res => {
					this.info = res

					// this.userHome()

				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.imgBox {
		position: relative;

		.stopVideo {
			position: absolute;
			width: 80rpx;
			height: 80rpx;
			top: calc(50% - 40rpx);
			left: calc(50% - 40rpx);
			z-index: 2;
		}

	}

	.indexListBox {
		background: #F7F7F7;
		display: flex;
		flex-direction: column;
	}

	.topbac {
		position: relative;
		height: 660rpx;

		.bacImg {
			width: 100vw;
			height: 490rpx;
		}

		.cu-custom {
			position: absolute;
			z-index: 3;
			top: 0;

			.wlIcon-fanhui1 {
				color: #fff;
				font-weight: bold;
			}
		}

		.jrsjdp {
			position: absolute;
			top: 340rpx;
			right: 20rpx;
			width: 222rpx;
			height: 48rpx;
			z-index: 2;
		}

		.xgbj {
			width: 154rpx;
			height: 48rpx;
		}

		.shopData {
			padding: 20rpx 32rpx 60rpx 32rpx;
			background: #fff;
			border-radius: 40rpx 40rpx 0 0;
			position: relative;
			top: -100rpx;
			width: 100%;
			height: 260rpx;
			/* #ifdef MP-WEIXIN */
			height: 280rpx;

			/* #endif */
			.qxgz {
				width: 616rpx;
				height: 56rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border: 2rpx solid #FF4900;
				font-size: 28rpx;
				color: #FF4900;
				text-align: center;
				line-height: 56rpx;
				font-weight: bold;
				margin-left: 34rpx;
			

			}

			.gz {
				color: #fff;
				background-color: #FF4900;
			}

			.title {
				position: absolute;
				top: 20rpx;
				left: 220rpx;
			}

			.headimg {
				background: #fff;
				width: 164rpx;
				height: 164rpx;
				border-radius: 50%;
				position: absolute;
				display: flex;
				top: -40rpx;
				align-items: center;
				justify-content: center;

				.img {
					width: 156rpx;
					height: 156rpx;
					border-radius: 50%;
				}
			}
		}

	}

	.activeTopbac {

		height: 554rpx;
		/* #ifdef MP-WEIXIN */
		height: 574rpx;
		/* #endif */
	}

	.swiperBox {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 99;
		background: #F7F7F7;
		height: 100vh;
		/* #ifdef MP-WEIXIN */
		height: 94vh;
		/* #endif */
	}

	.vh50 {
		height: calc(100vh - 646rpx);
	}

	.list-scroll-content {
		width: 100vw;
		overflow-x: hidden;
		height: 100%;
	}

	.blockBox {
		// display: grid;
		// column-count: 2;
		// grid-template-columns:1fr 1fr;
		// grid-gap: 14rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 0 0 0 14rpx;
		width: 100%;
		padding: 0 20rpx;
		margin-top: 20rpx;
		overflow-x: hidden;
		box-sizing: border-box;
		justify-content: space-between;

		.u-p-t-16 {
			width: 49%;
			border-radius: 32rpx;
			margin-bottom: 14rpx;
			background: #fff;
			padding-top: 0 !important;

		}

		.waterfallBox {
			width: 100%;
			justify-content: space-around;


		}

	}

	.biImg {
		position: fixed;
		z-index: 4;
		bottom: 160rpx;
		width: 180rpx;
		height: 180rpx;
		right: 0rpx;
	}

	.listDataBox {
		position: relative;


		.btnBj {
			position: absolute;
			color: #fff;
			font-size: 20rpx;
			padding: 6rpx 16rpx;
			background: rgba(60, 60, 60, 0.9);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			bottom: 140rpx;
			right: 10rpx;
			z-index: 3;
		}

		.shzImg {
			width: 122rpx;
			height: 46rpx;
			position: absolute;
			z-index: 3;
		}

		.wtgImg {
			width: 262rpx;
		}

		// margin-bottom: 14rpx;
		background: #fff;
		border-radius: 32rpx;

		.shops {
			padding: 10rpx 18rpx;
		}



		.imgs {
			border-radius: 24rpx;
			width: 100%;
			height: 450rpx;
			z-index: 1;

			::v-deep .u-lazy-item {
				width: 100%;
				height: 450rpx !important;
			}
		}

		.shopImg {
			width: 20rpx;
			height: 20rpx;
			border-radius: 50% 50%;
		}
	}

	.wanl-order-list {
		overflow-y: scroll;
	}

	@import "@/all.scss";

	page {
		height: 100%;
	}

	.wanl-cart-foot {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 997;
		min-height: 52px;
		background-color: #ffffff;
		padding: 0 12px;
	}

	.wanl-cart-goods {
		background-color: #ffffff;

		.picture {
			width: 180rpx;
			height: 180rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.content {
			.title {
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}

			.count {
				font-weight: 500;
				font-size: 24rpx;
				color: #757575;
				line-height: 34rpx;
				color: #757575;
			}

			.price {
				font-weight: 400;
				font-size: 24rpx;
				color: #FF4900;
				line-height: 34rpx;
			}
		}
	}

	.wanl-cart-foot {
		.cu-btn:not(:nth-child(1)) {
			margin-left: 16rpx;
		}
	}
</style>